<template>
  <view class="page-view">
    <!-- <view class="top-bg"> -->
    <view class="header-wrap">
      <!-- <view class="selectName" @click="areaShow=true">
            {{areaText}}
            <image class="arrow" src="../../static/icon/icon-bottom-arrow.png" mode=""></image>
          </view> -->
      <view class="selectName" @click="typeShow=true">
        {{typeText}}
        <image class="arrow" src="../../../static/icon/icon-bottom-arrow.png" mode=""></image>
      </view>
      <view class="selectName" @click="statusShow=true">
        {{statusText}}
        <image class="arrow" src="../../../static/icon/icon-bottom-arrow.png" mode=""></image>
      </view>
    </view>
    <!-- </view> -->
    <view class="posBox">
      <view class="list-wrap" :style="{ height: 'calc(100vh - 360rpx)' }">
        <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleGetMore">
          <view v-for="(item, index) in workList" :key="index">
            <!-- {{item.type==1?'日常运维':item.type==2?'工单处理':item.type==3?'水质检测':item.type==4?'公众反馈':''}} -->
            <view v-if="item.type == 4" class="task-item" @click="goToDetail(item)">
              <view class="titleName">
                <view class="" style="display: flex;align-items: center;flex-wrap: wrap;">
                  <view class="line"></view>
                  {{item.terminalName}}<text class="grey">工单编号:{{item.missionId}}</text>
                </view>
                <view class="type">公众反馈</view>
              </view>
              <view class="info-row"> <text>反馈类型</text>{{ item.feedBackType }}</view>
              <view class="info-row"> <text>问题描述</text>{{ item.desc }}</view>
              <view class="info-row"><text>提交时间</text>{{ item.date }}</view>
              <view :class="item.isHandle == 1 ? 'errorBg' : 'successBg' ">
                <image
                  :src="item.isHandle == 1 ? '../../../static/manage/error.png' : '../../../static/manage/success.png'"
                  class="statusIcon"></image>{{['未处理','已处理'][item.isHandle - 1]}}
              </view>
            </view>
            <view v-if="item.type == 2" class="task-item" @click="goToDetail(item)">
              <view class="titleName">
                <view class="" style="display: flex;align-items: center;flex-wrap: wrap;">
                  <view class="line"></view>
                  {{item.terminalName}}<text class="grey">工单编号:{{item.missionId}}</text>
                </view>
                <view class="type type2">工单处理</view>
              </view>
              <view class="info-row"> <text>问题类型</text>{{item.policeType}}</view>
              <view class="info-row" v-if="item.isHandle == 1"> <text>问题描述</text>{{item.desc}}</view>
              <view class="info-row" v-if="item.isHandle !== 1"> <text>处理说明</text>{{item.policeDesc}}</view>
              <view class="info-row" v-if="item.isHandle !== 1"> <text>运维人员</text>{{item.om}}</view>
              <view class="info-row"><text>运维时间</text>{{ item.date }}</view>
              <view :class="item.isHandle == 1 ? 'errorBg' : 'successBg' ">
                <image
                  :src="item.isHandle == 1 ? '../../../static/manage/error.png' : '../../../static/manage/success.png'"
                  class="statusIcon"></image>{{['未处理','已处理'][item.isHandle - 1]}}
              </view>
            </view>
            <view v-if="item.type == 1" class="task-item" @click="goToDetail(item)">
              <view class="titleName">
                <view class="" style="display: flex;align-items: center;flex-wrap: wrap;">
                  <view class="line"></view>
                  {{item.terminalName}}<text class="grey">工单编号:{{item.missionId}}</text>
                </view>
                <view class="type type3">日常运维</view>
              </view>
              <view class="info-row">
                <text>有无问题</text>{{item.equIssue == 2 || item.waterIssue == 2 || item.facilityIssue == 2 ? '有问题' : '无问题' }}
              </view>
              <view class="info-row"> <text>问题类型</text>{{item.omPoliceDesc}}</view>
              <view class="info-row"><text>问题描述</text>{{item.omIssueDesc}}</view>
              <view class="info-row"> <text>提交人员</text>{{item.om}}</view>
              <view :class="item.isHandle == 1 ? 'errorBg' : 'successBg' ">
                <image
                  :src="item.isHandle == 1 ? '../../../static/manage/error.png' : '../../../static/manage/success.png'"
                  class="statusIcon"></image>{{['未处理','已处理'][item.isHandle - 1]}}
              </view>
            </view>
            <view v-if="item.type == 3" class="task-item" @click="goToDetail(item)">
              <view class="titleName">
                <view class="" style="display: flex;align-items: center;flex-wrap: wrap;">
                  <view class="line"></view>
                  {{item.terminalName}}<text class="grey"></text>
                </view>
                <view class="type type4">水质检测</view>
              </view>
              <view class="info-row"> <text
                  style="width: 22%;">水质取样口</text>{{ item.samplingPort == 1 ? '入水口' : item.samplingPort == 2 ? '出水口' : ''}}
              </view>
              <view class="info-row"> <text style="width: 22%;">取样人</text>{{item.om}}</view>
              <view class="info-row"><text style="width: 22%;">取样时间</text>{{item.date}}</view>
              <view :class="item.isHandle == 1 ? 'errorBg' : 'successBg' ">
                <image
                  :src="item.isHandle == 1 ? '../../../static/manage/error.png' : '../../../static/manage/success.png'"
                  class="statusIcon"></image>水质报告
              </view>
            </view>
          </view>
          <van-empty v-if="!workList.length" description="暂无数据" />

        </scroll-view>
        <u-picker :show="typeShow" keyName="name" :columns="[columns1]" @confirm="bindPickerChange1"
          @cancel="typeShow=false"></u-picker>
        <u-picker :show="statusShow" keyName="name" :columns="[columns2]" @confirm="bindPickerChange2"
          @cancel="statusShow=false"></u-picker>
      </view>
    </view>
  </view>
</template>
<script>
import { getAreaTreeList } from '@/api/area'
import { getDictItemInfo } from '@/api/system.js';
import { getAllWorkOrderList } from '@/api/yunwei.js';
export default {
  filters: {
    showTastStatusText() {
      return '--';
    },
    filterDate(dateStr) {
      if (dateStr) {
        dateStr = dateStr.replaceAll('-', '/');
        return new Date(dateStr).format('yyyy-MM-dd');
      } else {
        return '';
      }
    },
  },
  props: {
    villageId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      areaText: false,
      columns1: [
        {
          name: '全部',
          value: ''
        },
        {
          name: '日常运维',
          value: '1'
        },
        {
          name: '工单处理',
          value: '2'
        },
        {
          name: '水质检测',
          value: '3'
        },
        {
          name: '公众反馈',
          value: '4'
        }],
      columns2: [
        {
          name: '全部',
          value: ''
        },
        {
          name: '未处理',
          value: '1'
        },
        {
          name: '已处理',
          value: '2'
        }],
      timeStr: '',
      equTypeList: [],
      typeShow: false,
      statusShow: false,
      typeValue: '',
      statusValue: '',
      typeText: '全部',
      statusText: '全部',
      areaText: '区域',
      clearsDateShow: false,
      startTime: '',
      endTime: '',
      dateShow: false,
      maxDate: new Date().valueOf(),
      minDate: new Date('2024-01-01').getTime(),
      policeList: [],
      total: null,
      page: 1,
      pageSize: 9999,
      params: {
        status: '',
        woType: '',
        areaId: '1698943710333108226',
        areaName: '永康开发区',
        column: 'createTime',
        order: 'desc',
      },
      workList: [
        // {
        //   type: 1,
        //   equtype: "液位计",
        //   terminalName: '汪家村终端进',
        //   missionId: '458793214569',
        //   drain: 1,
        //   feedBackType: '液位报警',
        //   desc: "液位计一进口，液位上涨35%，液位高度2.5m，液位超出安全水位，存在污水外溢风险。",
        //   date: '2024.06.07 08:50',
        //   isHandle: 2
        // }, {
        //   type: 2,
        //   equtype: "液位计",
        //   terminalName: '汪家村终端进',
        //   missionId: '458793214569',
        //   drain: 1,
        //   feedBackType: '液位报警',
        //   desc: "液位计一进口，液位上涨35%，液位高度2.5m，液位超出安全水位，存在污水外溢风险。",
        //   date: '2024.06.07 08:50',
        //   isHandle: 1
        // }, {
        //   type: 3,
        //   equtype: "液位计",
        //   terminalName: '汪家村终端进',
        //   missionId: '458793214569',
        //   drain: 4,
        //   feedBackType: '液位报警',
        //   desc: "液位计一进口，液位上涨35%，液位高度2.5m，液位超出安全水位，存在污水外溢风险。",
        //   date: '2024.06.07 08:50',
        //   isHandle: 1
        // }, {
        //   type: 3,
        //   equtype: "液位计",
        //   terminalName: '汪家村终端进',
        //   missionId: '458793214569',
        //   drain: 4,
        //   feedBackType: '液位报警',
        //   desc: "液位计一进口，液位上涨35%，液位高度2.5m，液位超出安全水位，存在污水外溢风险。",
        //   date: '2024.06.07 08:50',
        //   isHandle: 2
        // }, {
        //   type: 4,
        //   equtype: "液位计",
        //   terminalName: '汪家村终端进',
        //   missionId: '458793214569',
        //   drain: 4,
        //   feedBackType: '液位报警',
        //   desc: "液位计一进口，液位上涨35%，液位高度2.5m，液位超出安全水位，存在污水外溢风险。",
        //   date: '2024.06.07 08:50',
        //   isHandle: 1
        // }, {
        //   type: 3,
        //   equtype: "液位计",
        //   terminalName: '汪家村终端进',
        //   missionId: '458793214569',
        //   drain: 4,
        //   feedBackType: '液位报警',
        //   desc: "液位计一进口，液位上涨35%，液位高度2.5m，液位超出安全水位，存在污水外溢风险。",
        //   date: '2024.06.07 08:50',
        //   isHandle: 2
        // }
      ],
      taskList: [],
      policeTypeShow: false,
      woType: '',
      dataTree: []
    };
  },
  created() {
  },
  mounted() {
    this.getAllWorkOrderList()

  },
  methods: {
    onchange() { },
    goToDetail(item) {
      // console.log(i,'6.30');
      uni.navigateTo({
        url: `/subpack_TerminalDevice/yunweiDetail/index?type=${item.type}&id=${item.missionId}`
      })
    },
    async getAllWorkOrderList() {
      const villageId = this.villageId
      const res = await getAllWorkOrderList({
        villageId,
        begin: this.startTime,
        end: this.endTime,
        status: this.statusValue,
        type: this.typeValue,
        page: this.page,
        pageSize: this.pageSize
      })
      this.workList = res.data.data.voList || []
      this.total = res.data.data?.total || 0
    },
    bindPickerChange1: function (e) {
      console.log(e.value[0], '20257.1');
      this.typeValue = e.value[0].value;
      this.typeText = e.value[0].name;
      this.typeShow = false
      this.getAllWorkOrderList()
    },
    bindPickerChange2: function (e) {
      this.statusValue = e.value[0].value;
      this.statusShow = false;
      this.statusText = e.value[0].name
      this.getAllWorkOrderList()
    },
    handleGetMore() {
      this.page++;
      if (this.total && this.taskList.length >= this.total) {
        return;
      }
      // this.getAllWorkOrderList();
    }
  },
};
</script>
<style scoped lang="scss">
.page-view {
  height: calc(100vh - 240rpx);
  // background: #f8f9fb;
  position: relative;
  overflow: hidden;
}
.posBox {
  // position: absolute;
  // top: 260rpx;
}
// .top-bg {
//   width: 100%;
//   height: 330rpx;
//   background: #2769f7;
//   border-radius: 0rpx 0rpx 140rpx 140rpx;
//   padding-top: 104rpx;
//   text-align: center;
//   font-weight: 600;
//   font-size: 40rpx;
//   color: #ffffff;
//   letter-spacing: 4rpx;
//   position: relative;
//   .return {
//     position: absolute;
//     left: 32rpx;
//     margin-top: 8rpx;
//   }
// }
.header-wrap {
  // position: relative;
  margin-top: 32rpx;
  padding: 0 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  margin-bottom: 32rpx;
  font-weight: bold;
  font-size: 28rpx;
  margin-left: 8rpx;
  letter-spacing: 1rpx;
  .item_search {
    font-weight: 400;
    font-size: 24rpx;
    color: #4a4a4a;
    width: 56%;
    position: relative;
    .clearImg {
      position: absolute;
      width: 25rpx;
      height: 25rpx;
      right: 8rpx;
      bottom: 16rpx;
    }
  }
  .selectName {
    width: 327rpx;
    height: 56rpx;
    padding: 0 32rpx;
    line-height: 56rpx;
    background: #f2f6f7;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #4a4a4a;
    margin-right: 8rpx;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .arrow {
      width: 16rpx;
      height: 10rpx;
      vertical-align: middle;
      margin-left: 30rpx;
    }
  }
}
.scroll-Y {
  height: 100%;
  padding-bottom: 80rpx;
}

.task-item {
  width: 636rpx;
  // height: 556rpx;
  position: relative;
  margin: 16rpx 32rpx;
  background: #ffffff;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  padding: 16rpx 24rpx 30rpx 28rpx;
  font-weight: bold;
  font-size: 24rpx;
  text-align: left;
  .statusIcon {
    width: 20rpx;
    height: 20rpx;
    margin: 10rpx 12rpx;
    vertical-align: middle;
  }
  .successBg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120rpx;
    height: 40rpx;
    background: #d5efdd;
    border-radius: 10rpx 0rpx 10rpx 0rpx;
    font-weight: bold;
    font-size: 20rpx;
    color: #66c463;
    white-space: nowrap;
  }
  .errorBg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120rpx;
    height: 40rpx;
    background: #ffebef;
    border-radius: 10rpx 0rpx 10rpx 0rpx;
    font-weight: bold;
    font-size: 20rpx;
    color: #fc8382;
    white-space: nowrap;
  }
}
.titleName {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 34rpx;
  font-size: 28rpx;
  color: #4a4a4a;
  .line {
    width: 8rpx;
    height: 20rpx;
    background: rgba(39, 105, 247, 0.6);
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    margin-right: 14rpx;
  }
  .grey {
    font-weight: 400;
    font-size: 18rpx;
    color: #989898;
    margin-left: 12rpx;
  }
  .type {
    width: 102rpx;
    height: 40rpx;
    background: #f2e5ff;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    line-height: 40rpx;
    text-align: center;
    ont-weight: bold;
    font-size: 20rpx;
    color: #903cff;
  }
  .type2 {
    background: #d5efe7;
    color: #74cdaf;
  }
  .type3 {
    background: #e5eeff;
    color: #3c8aff;
  }
  .type4 {
    background: #fbf2d1;
    color: #fbb322;
  }
}
.info-row2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.info-row3 {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.info-row {
  color: #5e5e5e;
  margin-bottom: 14rpx;
  margin-left: 20rpx;
  text {
    width: 18%;
    color: #989898;
    display: inline-block;
  }
}
.btn-item {
  position: absolute;
  right: 26rpx;
  bottom: 32rpx;
  width: 168rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  background: #3c8aff;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  cursor: pointer;
  font-weight: 400;
  color: #fff;
}
.title {
  text-align: center;
  margin-top: 32rpx;
  font-weight: 800;
  font-size: 32rpx;
  color: #4a4a4a;
}
.infoBox {
  margin: 32rpx 24rpx 0 24rpx;
  font-weight: bold;
  font-size: 24rpx;
  text {
    width: 19%;
  }
}
.submitBtn {
  margin: 132rpx 48rpx 32rpx 48rpx;
}
::v-deep .u-input--radius {
  // width: 324rpx;
  // height: 60rpx;
  background: #f2f6f7;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
}
::v-deep .u-search__content {
  padding: 0 10rpx !important;
}
</style>
